<template>
  <el-pagination
    background
    @size-change="handleSizecahnge"
    @current-change="handelCurrentCahnge"
    :current-page="start"
    :page-sizes="pageSizes"
    :page-size="limit"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</template>

<script>
export default {
  data () {
    return {
      total: 0,
      start: 1,
      limit: 10,
      pageSizes: [5, 10, 15]
    }
  },
  props: {
    url: {
      type: String,
      required: true
    },
    queryData: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      default: 'post'
    }
  },
  created () {
    this.queryLisWithPage()
  },
  methods: {
    handleSizecahnge (pageSize) {
      this.limit = pageSize
      this.queryLisWithPage()
    },
    handelCurrentCahnge (pageNum) {
      if (this.start !== 0) {
        this.start = pageNum
      }
      this.queryLisWithPage()
    },
    queryLisWithPage () {
      var param = {}
      param.start = this.start
      param.limit = this.limit
      Object.assign(param, this.queryData)

      this.ajax({
        url: this.url,
        data: param,
        success: res => {
          this.start = res.data.nowpage
          this.limit = res.data.pagesize
          this.total = parseInt(res.data.total)
          this.$emit('on-query', res)
        }
      })
    }
  }
}
</script>
